<!--
 * @Description: 合同划节点详情
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-11-12 16:09:07
 * @LastEditTime: 2023-05-30 16:27:13
 * @FilePath: \cscec-pms-admin\src\views\construction\contractor\components\NodeDetail.vue
-->
<template>
  <div class="node-detail-wrapper">
    <section>
      <!-- 节点按时完成率情况 -->
      <section>
        <title-name title="节点按时完成率情况" />
        <EBar
          ref="accomplishRatio"
          :option="accomplishRatioOption"
          :ready="accomplishRatioReady"
        />
      </section>
      <!-- 节点按时完成率情况 -->
      <!-- 节点逾期率情况 -->
      <section>
        <title-name title="节点逾期率情况" />
        <EBar
          ref="overdueRatio"
          :option="overdueRatioOption"
          :ready="overdueRatioReady"
        />
      </section>
      <!-- 节点逾期率情况 -->
    </section>
    <!-- 节点完成情况 -->
    <section>
      <title-name title="节点完成情况" />
      <div>
        <p>当前应完成节点数：<span>{{ shouldAccomplish }}</span></p>
        <EBar
          ref="shouldAccomplish"
          :option="shouldAccomplishOption"
          :ready="shouldAccomplishReady"
        />
      </div>
      <div>
        <p>当前已完成节点数：<span>{{ alreadyAccomplish }}</span></p>
        <EBar
          ref="alreadyAccomplish"
          :option="alreadyAccomplishOption"
          :ready="alreadyAccomplishReady"
        />
      </div>
    </section>
    <section>
      <EPie
        ref="nodeAccomplish"
        :option="nodeAccomplishOption"
        :ready="nodeAccomplishReady"
      />
    </section>
    <!-- 节点完成情况 -->
  </div>
</template>
<script>
import EBar from '../../constructionSchedule/components/EBar'
import EPie from '../../constructionSchedule/components/EPie'
import contractor from '@/api/construction/contractor'
export default {
  name: 'NodeDetail',
  props: {
    // 隐藏显示
    visible: {
      type: Boolean,
      require: true
    }
  },
  components: {
    EBar,
    EPie
  },
  data() {
    return {
      // 节点按时完成率情况图表
      accomplishRatioOption: {
        name: '按时完成率',
        nameList: ['一级节点', '二级节点', '三级节点'],
        useUnit: '%',
        data: [
          {
            data: [],
            type: 'bar',
            barWidth: '40%'
          }
        ]
      },
      accomplishRatioReady: false,
      // 节点逾期率情况图表
      overdueRatioOption: {
        name: '逾期率',
        nameList: ['一级节点', '二级节点', '三级节点'],
        useUnit: '%',
        data: [
          {
            data: [],
            type: 'bar',
            barWidth: '40%'
          }
        ]
      },
      overdueRatioReady: false,
      // 当前应完成节点
      shouldAccomplish: void 0,
      shouldAccomplishOption: {
        name: '节点数',
        nameList: ['按期完成', '逾期完成', '逾期未完成'],
        data: [
          {
            data: [],
            type: 'bar',
            barWidth: '40%'
          }
        ],
        fun: (data) => {
          switch (data.name) {
            case '按期完成':
              this.handleNodeInfo({ isOnTimeFinish: true })
              break
            case '逾期完成':
              this.handleNodeInfo({ isOverdueFinish: true })
              break
            case '逾期未完成':
              this.handleNodeInfo({ isOverdueNotFinish: true })
              break
          }
        }
      },
      shouldAccomplishReady: false,
      // 当前已完成节点
      alreadyAccomplish: void 0,
      alreadyAccomplishOption: {
        name: ' 已完成数',
        nameList: ['一级节点', '二级节点', '三级节点'],
        data: [
          {
            data: [],
            type: 'bar',
            barWidth: '40%'
          }
        ],
        fun: (data) => {
          switch (data.name) {
            case '一级节点':
              this.handleNodeInfo({ level: 1, isOnTimeFinish: true, isOverdueFinish: true })
              break
            case '二级节点':
              this.handleNodeInfo({ level: 2, isOnTimeFinish: true, isOverdueFinish: true })
              break
            case '三级节点':
              this.handleNodeInfo({ level: 3, isOnTimeFinish: true, isOverdueFinish: true })
              break
          }
        }
      },
      alreadyAccomplishReady: false,
      // 节点完成占比
      nodeAccomplishReady: false,
      nodeAccomplishOption: {
        legendData: ['未开始', '正进行', '逾期未完成', '按期完成', '逾期完成'],
        seriesData: [
          {
            value: 0,
            name: '未开始'
          },
          { value: 0, name: '正进行' },
          { value: 0, name: '逾期未完成' },
          { value: 0, name: '按期完成' },
          { value: 0, name: '逾期完成' }
        ]
      }
    }
  },
  watch: {
    visible: {
      handler(v) {
        if (v) {
          this.$refs.accomplishRatio.resize()
          this.$refs.overdueRatio.resize()
          this.$refs.shouldAccomplish.resize()
          this.$refs.alreadyAccomplish.resize()
          this.$refs.nodeAccomplish.resize()
          this.getData()
        }
      }
    }
  },
  methods: {
    /**
     * @description: 获取数据
     * @param {void}
     * @return {void}
     */
    getData() {
      this.accomplishRatioReady = false
      this.overdueRatioReady = false
      this.shouldAccomplishReady = false
      this.alreadyAccomplishReady = false
      this.nodeAccomplishReady = false
      contractor.implementationKanbanHidden(this.$route.query.projectId + '')
        .then(
          ({
            code,
            data: {
              firstNodeOnTimeCompleteRate,
              secondNodeOnTimeCompleteRate,
              threeNodeOnTimeCompleteRate,
              firstNodeOverdueRate,
              secondNodeOverdueRate,
              threeNodeOverdueRate,
              currentShouldCompleteNodeNum,
              onTimeCompleteNodeNum,
              overdueCompleteNodeNum,
              overdueNotCompleteNodeNum,
              firstNodeCompletionNum,
              secondNodeCompletionNum,
              threeNodeCompletionNum,
              currentCompleteNodeNum,
              notStartedNodeNum,
              underwayNodeNum
            }
          }) => {
            if (code === 200) {
              // 节点按时完成率情况
              this.accomplishRatioOption.data[0].data = [firstNodeOnTimeCompleteRate, secondNodeOnTimeCompleteRate, threeNodeOnTimeCompleteRate]
              // 节点逾期率情况
              this.overdueRatioOption.data[0].data = [firstNodeOverdueRate, secondNodeOverdueRate, threeNodeOverdueRate]
              // 当前应完成节点
              this.shouldAccomplish = currentShouldCompleteNodeNum
              this.shouldAccomplishOption.data[0].data = [onTimeCompleteNodeNum, overdueCompleteNodeNum, overdueNotCompleteNodeNum]
              // 当前已完成节点
              this.alreadyAccomplish = currentCompleteNodeNum
              this.alreadyAccomplishOption.data[0].data = [firstNodeCompletionNum, secondNodeCompletionNum, threeNodeCompletionNum]
              // 节点完成占比
              this.nodeAccomplishOption.seriesData = [
                { value: notStartedNodeNum, name: '未开始' },
                { value: underwayNodeNum, name: '正进行' },
                { value: overdueNotCompleteNodeNum, name: '逾期未完成' },
                { value: onTimeCompleteNodeNum, name: '按期完成' },
                { value: overdueCompleteNodeNum, name: '逾期完成' }
              ]
            }
          }
        )
        .finally(() => {
          this.accomplishRatioReady = true
          this.overdueRatioReady = true
          this.shouldAccomplishReady = true
          this.alreadyAccomplishReady = true
          this.nodeAccomplishReady = true
        })
    },
    /**
     * @description: 跳转节点信息
     * @param {number} level 节点等级
     * @return {void}
     */
    handleNodeInfo({ level, isOnTimeFinish, isOverdueFinish, isOverdueNotFinish }) {
      this.$router.push({
        path: '/construction/contractor/contractorImplementationManagement/nodeInfo',
        query: {
          allLevel: level ? false : true,
          level,
          projectId: this.$route.query.projectId,
          isOnTimeFinish,
          isOverdueFinish,
          isOverdueNotFinish,
          operation: 'true'
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.node-detail-wrapper {
  display: flex;
  margin: 0 -10px;
  margin-top: 20px;
  > section {
    flex: 1;
    border: 1px solid #e4e4e4;
    margin: 0 10px;
    padding: 10px;
    > div {
      display: flex;
      flex-direction: column;
      > p {
        margin-left: auto;
        background-color: rgba(24, 144, 255, 0.08);
        padding: 5px 10px;
        color: #666666;
        margin-bottom: 10px;
        span {
          color: #1890ff;
        }
      }
    }
  }
  > section:nth-of-type(1) {
    border: none;
    padding: 0;
    > section {
      padding: 10px;
      border: 1px solid #e4e4e4;
    }
    > section:nth-of-type(1) {
      margin-bottom: 20px;
    }
  }
}
</style>
